<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>

  <style>
      .cal{
          background-color: gainsboro;
          width:210px;
      }
      .content{
          width:200px;
          height:250px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          cursor: pointer;
      }
      .content div{
          border-radius: 50%;
          box-sizing: border-box;
          width:50px;
          height:50px;
          border:1px solid gray;
          background-color: ghostwhite;
          display: flex;
          justify-content: center;
          align-items: center;
      }
  </style>
</head>
<body>

<div id="app">
    <div id="cal">
        算式:<input type="text" v-model="suanshi" readonly><br>
        输入:<input type="text" v-model="num">
        结果:<input type="text" v-model="result">
        <div class="content">
            <div @click="clear()">C</div>
            <div @click="clearCE()">CE</div>
            <div></div>
            <div></div>
            <div @click="changeNum('1')">1</div>
            <div @click="changeNum('2')">2</div>
            <div @click="changeNum('3')">3</div>
            <div @click="changeF('+')">+</div>

            <div @click="changeNum('4')">4</div>
            <div @click="changeNum('5')">5</div>
            <div @click="changeNum('6')">6</div>
            <div @click="changeF('-')">-</div>

            <div @click="changeNum('7')">7</div>
            <div @click="changeNum('8')">8</div>
            <div @click="changeNum('9')">9</div>
            <div @click="changeF('*')">*</div>

            <div @click="changeF('/')">/</div>
            <div @click="changeNum('0')">0</div>
            <div @click="changeNum('.')">.</div>
            <div @click="changeF('=')">=</div>
    </div>
</div>
</div>
<script src="./vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return{
                    suanshi:'',
                    num:'',
                    result:''
                }
            },
            methods:{
                changeNum(shu){
                    this.num+=shu
                },
                changeF(fuhao){
                    if(fuhao!='='){
                        this.suanshi+=this.num+fuhao
                        this.num=''
                    }
                    else {
                        this.suanshi+=this.num
                        this.result=eval(this.suanshi);
                    }
                },

            clear(){
                this.num=''
                this.suanshi=''
                },
            clearCE(){
                this.num=''
                this.suanshi=''
                this.result=''
                }
            },
            computed:{
                newnum(){
                    return this.result.toFixed(2)
                }
            }
        }).mount("#app")
    </script>

</body>
</html>
